<template>
  <div id="crumbs"><!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(crumb, index) in crumbList" :key="crumb.url">{{crumb.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  import { getLocalStorage } from '@/utils/auth'
  export default {
    props: {
      title:{
        type: String,
        default: ""
      }
    },
    data(){
        return {
          crumbList:[],
          fromRouter:[]
        }
    },
    computed:{
    },
    methods: {
      getCrumbs(to,from){
        //console.log(to,'to',from,'from')
        //console.log(this.$route,'this.route')

        let matcheds = null
        let fromMatched = []
        this.fromRouter = []

        if(to){
          matcheds = to.matched
          fromMatched = from.matched
          from.matched.forEach((item)=>{
            this.fromRouter.push({name:item.name,path:item.path,meta:{title:item.meta.title}})
          })
          localStorage.setItem('curbreadcrumb', JSON.stringify(this.fromRouter))
        }else{
          matcheds = this.$route.matched
        }

         //特殊处理：为实现新增、修改、详情页名称能在crumbs中显示，特别判断路径包含add/edit/detail字段，因此要规范路由命名
         let ary =this.$route.path.split('/')
         let str = ary[ary.length-1]
         let statusName = str.toString().toLowerCase()
         const isDetail = statusName.indexOf('detail')
         const isEdit =  statusName.indexOf('edit')
         const isAdd =  statusName.indexOf('add')
        if(isDetail>-1 || isEdit>-1 || isAdd>-1 ){
          if(JSON.parse(getLocalStorage('curbreadcrumb')).length !== 0){
             fromMatched =JSON.parse(getLocalStorage('curbreadcrumb'))
          }
        }

        //console.log(to,from,'from')
        var matched = matcheds.filter(item => {
          if(item.name == 'index'){
            return false;
          }else{
            return item.meta.title
          }
        })

        if(matched && matched != 'index'){
          if(isDetail>-1 || isEdit>-1 || isAdd>-1 ){
            this.crumbList = fromMatched.concat(matched);
          }else{
            this.crumbList = matched
          }
        }

      }
    },
    watch:{
      '$route'(to,from){
        this.getCrumbs(to,from);
      },
      deep: true
    },
    created(){
      this.getCrumbs();
    }
  }
</script>
<style lang="scss" src="../assets/css//components//crumbs.scss" scope>
</style>
